<script setup>
import Setting from "./components/Setting.vue";
import Situation from "./components/Situation.vue";
import { nextTick, ref } from "vue";
const settingRef = ref();
const situationRef = ref();
const activeName = ref("回访情况");
const tablist = ref([
  { id: 1, name: "回访情况", component: "Situation" },
  // { id: 2, name: "提醒设置", component: "Setting" },
]);
const tabChange = (e) => {
  nextTick(() => {
    if (e == "提醒设置") {
      settingRef.value[0].handlerSearch();
    } else if (e == "回访情况") {
      situationRef.value[0].initSearch();
    }
  });
};
</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
    <el-tab-pane
      v-for="item in tablist"
      :key="item.id"
      :label="item.name"
      :name="item.name"
    >
      <!-- 商户分组 -->
      <Setting ref="settingRef" v-if="item.component == 'Setting'"></Setting>
      <!-- 门店分组 -->
      <Situation
        ref="situationRef"
        v-if="item.component == 'Situation'"
      ></Situation>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="less" scoped>
.demo-tabs {
  height: 100%;
  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
  }
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
  :deep(.el-tabs__item.is-active) {
    color: var(--el-color-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }
}
</style>
